<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--    <link rel="icon" href="<%= BASE_URL %>favicon.ico">-->
    <link rel="icon" href="<%= BASE_URL %>yt.png">
    <title>衍天DPS计算器</title>
  </head>
  <body>
<!--  &lt;!&ndash; 灯笼1 &ndash;&gt;-->
<!--  <div class="deng-box">-->
<!--    <div class="deng">-->
<!--      <div class="xian"></div>-->
<!--      <div class="deng-a">-->
<!--        <div class="deng-b"><div class="deng-t">天</div></div>-->
<!--      </div>-->
<!--      <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>-->
<!--    </div>-->
<!--  </div>-->

<!--  &lt;!&ndash; 灯笼2 &ndash;&gt;-->
<!--  <div class="deng-box1">-->
<!--    <div class="deng">-->
<!--      <div class="xian"></div>-->
<!--      <div class="deng-a">-->
<!--        <div class="deng-b"><div class="deng-t">冲</div></div>-->
<!--      </div>-->
<!--      <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>-->
<!--    </div>-->
<!--  </div>-->
<!--  &lt;!&ndash; 灯笼3 &ndash;&gt;-->
<!--  <div class="deng-box2">-->
<!--    <div class="deng">-->
<!--      <div class="xian"></div>-->
<!--      <div class="deng-a">-->
<!--        <div class="deng-b"><div class="deng-t">气</div></div>-->
<!--      </div>-->
<!--      <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>-->
<!--    </div>-->
<!--  </div>-->

<!--  &lt;!&ndash; 灯笼4 &ndash;&gt;-->
<!--  <div class="deng-box3">-->
<!--    <div class="deng">-->
<!--      <div class="xian"></div>-->
<!--      <div class="deng-a">-->
<!--        <div class="deng-b"><div class="deng-t">牛</div></div>-->
<!--      </div>-->
<!--      <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>-->
<!--    </div>-->
<!--  </div>-->
<!--    <script src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>-->
<!--<script src="L2Dwidget.min.js"></script>-->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
  L2Dwidget.init({
    "model": {
      //jsonpath控制显示那个小萝莉模型，下面这个就是我觉得最可爱的小萝莉模型，替换时后面名字也要替换掉
      jsonPath: 'https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json',
      "scale": 1
    },
    "display": {
      "position": "left", //看板娘的表现位置
      "width": 100,  //小萝莉的宽度
      "height": 200, //小萝莉的高度
      "hOffset": 0,
      "vOffset": -20
    },
    "mobile": {
      "show": true,
      "scale": 0.5
    },
    "react": {
      "opacityDefault": 0.7,
      "opacityOnHover": 0.2
    }
  });
</script>
<!--    <script type="text/javascript"  src="lizi.js"></script>-->
    <noscript>
      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
<style>
  .deng-box {
    position: fixed;
    top: -40px;
    right: 20px;
    z-index: 999;
  }

  .deng-box1 {
    position: fixed;
    top: -30px;
    right: 100px;
    z-index: 999;
  }
  .deng-box2 {
    position: fixed;
    top: -40px;
    right: 180px;
    z-index: 999;
  }
  .deng-box3 {
    position: fixed;
    top: -30px;
    right: 260px;
    z-index: 999;
  }

  .deng-box1 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
  }
  .deng-box2 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 3s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
  }
  .deng-box3 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
  }

  .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 3s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
  }

  .deng-a {
    width: 100px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.1);
    margin: 12px 8px 8px 8px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
  }

  .deng-b {
    width: 45px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.1);
    margin: -4px 8px 8px 26px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
  }

  .xian {
    position: absolute;
    top: -20px;
    left: 60px;
    width: 2px;
    height: 20px;
    background: #dc8f03;
  }

  .shui-a {
    position: relative;
    width: 5px;
    height: 20px;
    margin: -5px 0 0 59px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -45px;
    background: #ffa500;
    border-radius: 0 0 5px 5px;
  }

  .shui-b {
    position: absolute;
    top: 14px;
    left: -2px;
    width: 10px;
    height: 10px;
    background: #dc8f03;
    border-radius: 50%;
  }

  .shui-c {
    position: absolute;
    top: 18px;
    left: -2px;
    width: 10px;
    height: 35px;
    background: #ffa500;
    border-radius: 0 0 0 5px;
  }

  .deng:before {
    position: absolute;
    top: -7px;
    left: 29px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    z-index: 999;
    border-radius: 5px 5px 0 0;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
  }

  .deng:after {
    position: absolute;
    bottom: -7px;
    left: 10px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    margin-left: 20px;
    border-radius: 0 0 5px 5px;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
  }

  .deng-t {
    font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
    font-size: 3.2rem;
    color: #dc8f03;
    font-weight: bold;
    line-height: 85px;
    text-align: center;
  }

  .night .deng-t,
  .night .deng-box,
  .night .deng-box1 {
    background: transparent !important;
  }

  @-moz-keyframes swing {
    0% {
      -moz-transform: rotate(-10deg)
    }

    50% {
      -moz-transform: rotate(10deg)
    }

    100% {
      -moz-transform: rotate(-10deg)
    }
  }

  @-webkit-keyframes swing {
    0% {
      -webkit-transform: rotate(-10deg)
    }

    50% {
      -webkit-transform: rotate(10deg)
    }

    100% {
      -webkit-transform: rotate(-10deg)
    }
  }
</style>
